<template>
  <!-- <page-meta
    :page-style="'overflow:' + (stopAnimation ? 'hidden' : 'auto')"
  ></page-meta> -->
  <view style="height: 100vh;">
    <scroll-view scroll-y="true">
      <!-- <page-meta :page-style="'overflow:'+(showShare?'hidden':'visible')"></page-meta>
	    <page-meta :page-style="'overflow:'+(showCanvas?'hidden':'visible')"></page-meta> -->
      <view style="height: 100%;" :style="{ backgroundColor: pageColor }">
        <!-- 分享遮罩 -->
        <view class="share-box" v-if="!load">
          <view class="posters" :style="{ height: `${deviation + 1100}rpx` }">
            <canvas
              :style="{ height: `${deviation + 1100}rpx` }"
              class="posters-canvas"
              id="share"
              canvas-id="share"
            ></canvas>
          </view>

          <!-- <view class="share-list">
	        <view class="share-item">
	        <view class="share-title">分享到</view>
	        </view>
	        <view
	        class="share-item"
	        v-for="(item, index) in shareList"
	        @click="sharePosters"
	        :key="index"
	        >
	        <view class="share-menu"></view>
	    
	        <view class="share-label">
	          <button :open-type="item.type">{{ item.name }}</button>
	        </view>
	        </view>
	      </view> -->
          <view class="share-icon">
            <u-icon @click="close" name="close"></u-icon>
          </view>
          <!-- <view class="share-mask"></view> -->
        </view>
        <view
          class="this_detail"
          v-model="collection_detail"
          :style="{ backgroundColor: pageColor }"
        >
          <view class="big_img">
            <image
              class="big-bg"
              :src="collection_detail.background_image"
            ></image>
            <!-- 自定义返回按钮 -->
            <view
              class="back_btn"
              :style="{ top: `${topHeight}rpx` }"
              @tap="PageBack()"
            >
              <image src="/static/back_btn.png"></image>
            </view>
            <!-- 分享按钮 -->
            <view
              class="share_btn"
              :style="{ top: `${windowHeight + 130}rpx` }"
              @click="share"
              open-type="share"
            >
              <image src="/static/share.png"></image>
            </view>
            <!-- 藏品图（可能有动画） -->
            <!-- <view
	        class="collectionImg_box"
	        @click="openFile"
	        :style="{ transform: animationData }"
	        >
	        <view class="collectionImg">
	          <image :src="collection_detail.cover_url"></image>
	        </view>
	        </view> -->
            <!-- 3d旋转 -->
            <view
              @click="openFile"
              class="preview-box"
              :style="{
                transform: previewStyle.transform,
                border: previewStyle.border,
                transformStyle: previewStyle.transformStyle,
                maxWidth: previewStyle.maxWidth,
                maxHeight: previewStyle.maxHeight,
                width: previewStyle.width,
                height: previewStyle.height,
              }"
            >
              <view
                class="con1 rectangle"
                :style="{
                  height: `${imgHeight}rpx`,
                  width: `${proportion * 400}rpx`,
                }"
              >
                <image
                  mode="aspectFit"
                  v-if="collection_detail.cover_url && proportion"
                  :style="{
                    border: imgStyle.border,
                    maxWidth: imgStyle.maxWidth,
                    maxHeight: imgStyle.maxHeight,
                    width: imgStyle.width,
                    height: imgStyle.height,
                  }"
                  :src="collection_detail.cover_url"
                />
                <image
                  class="preview-icon"
                  v-if="showPlay && proportion"
                  src="/static/play.png"
                  mode="aspectFit"
                />
                <view class="preview-null" v-if="!proportion">加载中</view>
              </view>
              <view
                class="con2 rectangle"
                :style="{
                  height: `${imgHeight}rpx`,
                  width: `${proportion * 400}rpx`,
                }"
              ></view>
              <view
                class="con3 rectangle"
                :style="{
                  height: `${imgHeight}rpx`,
                }"
              ></view>
              <view
                class="con4 rectangle"
                :style="{
                  height: `${imgHeight}rpx`,
                }"
              ></view>
              <view
                class="con5 rectangle"
                :style="{
                  height: `${imgHeight}rpx`,
                  width: `${proportion * 400}rpx`,
                }"
              ></view>
              <view
                class="con6 rectangle"
                :style="{
                  height: `${imgHeight}rpx`,
                  width: `${proportion * 400}rpx`,
                }"
              ></view>
            </view>
            <!-- 渐变 -->
            <view
              class="transColor"
              style="position: absolute; bottom: 0; width: 100%; height: 80rpx;"
              :style="{
                backgroundImage:
                  'linear-gradient(transparent,' + pageColor + ')',
              }"
            ></view>
          </view>
          <!-- 详情 -->
          <view class="detail_content" v-model="collection_detail">
            <!-- 商品信息 -->
            <view class="goods_detail">
              <view class="goods_title">{{ collection_detail.name }}</view>

              <!-- 活动数量，发行方式 -->
              <view class="content_countBox">
                <view class="two_box">
                  <!-- 活动下藏品数量 -->
                  <view class="count">
                    <!-- 总份数 -->
                    <view class="total">
                      限量
                    </view>
                    <!-- 共几款 -->
                    <view class="models">
                      {{ collection_detail.show_number }}份
                    </view>
                  </view>
                  <!-- 活动发行类型（字的长度可能不同） -->
                  <view class="types">{{ collection_detail.flag }}</view>
                </view>

                <!-- 价格 -->
                <view class="price">限量领取</view>
              </view>
              <view class="goods_host">
                <view class="host">
                  <view class="host_logo">
                    <image
                      :src="collection_detail.brand_info.icon_image"
                    ></image>
                  </view>
                  <text>{{ collection_detail.brand_info.brand_name }}</text>
                </view>

                <text
                  style="
                    text-align: right;
                    font-style: italic;
                    color: #ccc;
                    font-size: 24rpx;
                  "
                >
                  专属发行
                </text>
              </view>
            </view>
            <!-- 数字藏品小贴士 -->
            <view class="nft_notice">
              <view class="title">数字藏品小贴士</view>
              <view class="notice_img">
                <image :src="collection_detail.picture_list.notice"></image>
              </view>
            </view>
            <!-- 藏品描述 -->
            <view class="collection_describe">
              <view
                class="title"
                style="text-align: center; font-size: 32rpx; color: #4ffffe;"
              >
                <image
                  mode="aspectFit"
                  :src="collection_detail.picture_list.collection"
                  style="width: 490rpx; height: 35rpx;"
                ></image>
              </view>
              <view class="describe" style="width: 100%; margin: 30rpx auto;">
                <image
                  mode="widthFix"
                  class="describe-info"
                  style="width: 100%;"
                  :src="collection_detail.description_url"
                ></image>
              </view>
            </view>
            <!-- 特别提醒 -->
            <view class="special_notice">
              <view
                class="title"
                style="
                  padding-top: 35rpx;
                  text-align: center;
                  font-size: 32rpx;
                  color: #4ffffe;
                "
              >
                <image
                  mode="aspectFit"
                  :src="collection_detail.picture_list.special"
                  style="width: 490rpx; height: 35rpx;"
                ></image>
              </view>
              <view
                class="describe"
                style="
                  width: 100%;
                  margin: 30rpx auto;
                  font-size: 26rpx;
                  color: #babcbb;
                "
              >
                <view>
                  请您确保在符合相关法规要求下使用区块链服务。注册卯时数字平台使用的手机号码实名认证信息必须与本人身份信息一致。
                </view>
              </view>
            </view>
            <!-- 权益说明 -->
            <view class="equity_describe">
              <view
                class="title"
                style="
                  padding-top: 35rpx;
                  text-align: center;
                  font-size: 32rpx;
                  color: #4ffffe;
                "
              >
                <image
                  mode="aspectFit"
                  :src="collection_detail.picture_list.equit"
                  style="width: 490rpx; height: 35rpx;"
                ></image>
              </view>
              <view
                class="describe"
                style="
                  width: 100%;
                  margin: 30rpx auto;
                  font-size: 26rpx;
                  color: #babcbb;
                  line-height: 40rpx;
                "
              >
                数字藏品为虚拟数字商品，而非实物，仅限中国大陆用户领取或者通过空投获取。版权品的版权使用权归持有用户所有，非版权品的数字藏品版权由发行方或原创者所有，非版权品除另行取得版权拥有者书面同意外，用户不得将数字藏品用于任何商业用途，平台不支持任何形式的有偿转赠与炒作，请警惕诈骗风险。
              </view>
            </view>
          </view>
        </view>
        <view class="footer_btn" v-if="loads">
          <!-- 告罄按钮 -->
          <view class="footer-tip" v-if="userInfo.is_auth == 1">
            <view class="tip">*您还未实名认证，暂无法参与活动</view>
            <view class="btn" @click="jumps">立即认证</view>
          </view>
          <view class="To_buy" v-if="soldOut">
            <button class="exhausted">已售罄</button>
          </view>
          <!-- 去购买按钮 -->
          <view v-if="!soldOut">
            <view class="To_buy" @click="get()" v-if="collectionStatus == '1'">
              <button>立即领取</button>
            </view>
            <view
              class="To_buy"
              @click="advance()"
              v-if="collectionStatus == '2'"
            >
              <button>关注该活动</button>
            </view>
            <view
              class="To_buy"
              @click="cancelFollow(collection_detail.follow_id)"
              v-if="collectionStatus == '3'"
            >
              <button>已关注</button>
            </view>
            <view
              class="To_buy"
              @click="myCollection()"
              v-if="collectionStatus == '4'"
            >
              <button>已领取</button>
            </view>
            <view class="end_btn" v-if="collectionStatus == '5'">
              <button>已结束</button>
            </view>
          </view>
        </view>
        <!--    <view class="test">
	      <canvas
	        @longpress.stop="saveSharePic"
	        class="canvas"
	        canvas-id="testCanvas"
	      ></canvas>
	      </view> -->
        <!-- 分享保存遮罩 -->
        <!-- :show="showShare" -->
        <u-popup
          ref="pop1"
          :round="40"
          :zoom="false"
          mode="center"
          @close="close"
          @open="open"
          @touchmove.stop.prevent=""
        >
          <view v-if="false">
            <view class="share_content">
              <view class="share_img">
                <image
                  src="https://publish.onedaen.com/uploads/static/collection_img.png"
                ></image>
              </view>
              <view class="share_detail">
                <view class="share_text">
                  <view class="name">明代书画家作品数字展</view>
                  <view class="two_box">
                    <!-- 活动下藏品数量 -->
                    <view class="count">
                      <!-- 总份数 -->
                      <view class="total">限量555份</view>
                    </view>
                    <!-- 共几款 -->
                    <view class="models">共5款</view>
                    <!-- 活动发行类型（字的长度可能不同） -->
                    <view class="types">空投</view>
                  </view>
                  <view class="host">
                    <view class="host_logo">
                      <image
                        src="https://publish.onedaen.com/uploads/static/host-logo.png"
                      ></image>
                    </view>
                    <text>话剧皮囊</text>
                  </view>
                </view>
                <view class="share_logo">
                  <view class="zxl_logo" style="margin-top: 150rpx;">
                    <image
                      style="width: 260rpx; height: 50rpx;"
                      src="../../static/zxl_yde.png"
                    ></image>
                  </view>
                  <view class="share_qrcode">
                    <image
                      class="qrcode"
                      src="https://publish.onedaen.com/uploads/static/qrcode.jpg"
                    ></image>
                    <text>长按识别二维码</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </u-popup>
        <!-- canvas -->

        <!-- 领取遮罩 -->
        <u-popup
          :show="show"
          :round="30"
          mode="center"
          @close="close"
          @open="open"
        >
          <view class="get_success">
            <image
              src="https://publish.onedaen.com/uploads/static/bg.png"
              style="position: relative; width: 100%; border-radius: 30rpx;"
            ></image>
            <view class="content">
              <view class="success_img">
                <image src="/static/get_success.png"></image>
              </view>
              <view class="success_text">
                恭喜您，领取成功！
              </view>
              <view class="get_btn" @click="myCollection">
                <view>前往查看</view>
              </view>
              <view class="box-close" @click="close">
                <image src="/static/close.png" mode="scaleToFill" />
              </view>
            </view>
          </view>
        </u-popup>
        <!-- 关注遮罩 -->
        <u-popup
          :show="advanceSuccess"
          :round="30"
          mode="center"
          @close="close"
          @open="open"
        >
          <view class="get_success">
            <image
              src="https://publish.onedaen.com/uploads/static/bg.png"
              style="position: relative; width: 100%; border-radius: 30rpx;"
            ></image>
            <view class="content">
              <view class="success_img">
                <image src="/static/get_success.png"></image>
              </view>
              <view class="success_text">
                恭喜您，关注成功！
              </view>
              <view class="get_btn" @click="myFollow()">
                <view>前往查看</view>
              </view>
              <view class="box-close" @click="close">
                <image src="/static/close.png" mode="scaleToFill" />
              </view>
            </view>
          </view>
        </u-popup>
        <!-- 购买遮罩 -->
        <pop
          ref="pop2"
          direction="below"
          :is_close="true"
          :is_mask="true"
          :width="100"
          height="fit-content"
          :maskFun="true"
          @watchOpen="watchOpen"
          @watchClose="watchClose"
        >
          <view class="buy_content">
            <view class="buy_header">
              <view class="things_img">
                <image></image>
              </view>
              <view class="header_text">
                <view class="price">
                  <text>￥</text>
                  118
                </view>
                <view class="stock">库存：</view>
                <view class="limit">限购：</view>
              </view>
            </view>
            <view class="type">
              <view class="type_title">分类</view>
              <view class="type_select">
                <view class="select_box selected">数字藏品1</view>
                <view class="select_box" style="margin-left: 30rpx;">
                  数字藏品2
                </view>
              </view>
            </view>
            <view class="count">
              <view class="count_title">
                <text>购买数量</text>
                <view class="limit_box">限购1件</view>
              </view>
              <view class="change_count">
                <button class="reduce">-</button>
                <input value="1" />
                <button class="add">+</button>
              </view>
            </view>
            <view class="buy_now">
              <button>立即购买</button>
            </view>
          </view>
        </pop>
        <!-- 查看藏品主文件 -->
        <view class="files">
          <CheckFile
            @close="
              () => {
                stopAnimation = false
              }
            "
            :info="fileInfo"
            ref="file"
          />
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import pop from '@/components/ming-pop/ming-pop.vue'
import api from '@/request/api.js'
import CheckFile from '@/pages/details/component/CheckFile.vue'
import wxlogin from '@/common/wxlogin.js'
import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js'
export default {
  data() {
    return {
      statusBarHeight: 0,
      titleBarHeight: 0,
      screenHeight: 0,
      systemWidth: 0, // 屏幕高度比例
      systemHeight: 0,
      deviation: 0,
      pageColor: '', //主题背景颜色
      showPrice: true, //如果藏品免费
      showShare: false, //藏品分享遮罩
      show: false, //遮罩
      advanceSuccess: false,
      noClick: true,
      token: '', //登录token
      is_auth: '', //实名信息
      activity_id: '',
      collection_id: '',
      uid: '',
      activity_appointment: '',
      src: 'http://publish.onedaen.com', //图片地址头
      collection_detail: {}, //藏品详情
      // 分享菜单列表
      shareList: [
        {
          name: '微信',
          type: 'friend',
        },
        {
          name: '朋友圈',
          type: 'share',
        },
        // {
        //   name: '复制链接',
        // },
        {
          name: '保存图片',
          type: 'save',
        },
      ],
      showState: false,
      res: '', // px 转化为rpx
      animationData: '', //动画
      imgDeg: 360, //图片旋转角度
      imgDegs: 360, //图片旋转角度
      touchState: false,
      timer: '', //定时器
      timers: '',
      direction: 'left',
      collectionStatus: '1',
      soldOut: false, //售罄
      canvasImg: '', // canvas路径
      is_follow: false,
      is_advance: false,
      showCanvas: false,
      loadCanvas: false,
      stopAnimation: false,

      launch: false,
      nowTime: false,
      load: false,
      scrTimer: '',
      option: {},
      windowHeight: 0,
      scrollTop: 0,
      topHeight: 0,
      fileInfo: {}, // 藏品文件信息
      // 藏品预览图相关
      imgHeight: 0,
      proportion: 0,
      previewStyle: {
        border: '4rpx solid rgba(255, 255, 255, 0.5)',
        transform: 'rotateY(30deg)',
        transformStyle: 'preserve-3d',
        maxWidth: '400rpx',
        maxHeight: '400rpx',
        width: '400rpx',
        height: '400rpx',
      },
      // 状态列表
      activityList: {
        5: {
          name: '已开始',
          end: '结束',
          start: '正在发行',
          info: 'end_time',
        },
        6: {
          name: '已结束',
          end: '结束',
          start: '活动结束',
          info: 'end_time',
        },
        7: {
          name: '预热中',
          end: '开始',
          start: '即将发行',
          info: 'begin_time',
        },
      },
      imgStyle: {
        border: '',
        maxWidth: '100%',
        maxHeight: '100%',
        width: '',
        height: '',
      },
      showPlay: false,
      loads: false,
      userInfo: {},
    }
  },
  components: {
    pop,
    CheckFile,
  },
  onReady() {
    this.init()
    // 无限循环动画
    // this.timer = setInterval(
    //   function () {
    //     return
    //     if (this.stopAnimation) return
    //     if (this.direction == 'left') {
    //       this.imgDeg = this.imgDeg + 1
    //       this.direction = this.imgDeg == 390 ? 'right' : 'left'
    //     } else if (this.direction == 'right') {
    //       this.imgDeg = this.imgDeg - 1
    //       this.direction = this.imgDeg == 330 ? 'left' : 'right'
    //     }
    //     this.animationData = `translateY(-15px) rotateY(${this.imgDeg}deg)`
    //   }.bind(this),
    //   100,
    // )
  },
  onUnload() {
    clearInterval(this.timer)
  },
  onShow() {
    this.init()
  },
  onLoad(option) {
    this.option = option
    // 获取系统高度
    uni.getSystemInfo({
      success: (res) => {
        this.windowHeight = res.statusBarHeight * 2
      },
    })
    // 获取胶囊按钮
    const infos = uni.getMenuButtonBoundingClientRect()
    this.topHeight = infos.top * 2
    /* 接收上一页传的参数 */
    // let id = option.id
    // let activity_id = option.activity_id
    // let collection_id = option.collection_id
    // this.activity_id = activity_id
    // this.collection_id = collection_id
    // /* 获取藏品详情 */
    // api
    //   .getCollectionsDetail({
    //     /* 新增需传uid */
    //     activity_id: activity_id,
    //     collection_id: collection_id,
    //   })
    //   .then((res) => {
    //     this.collection_detail = res.data
    //     let follow = res.data.is_follow
    //     if (follow == 1) {
    //       this.is_follow = true
    //     } else {
    //       this.is_follow = false
    //     }
    //     if (res.data.price == '0.00') {
    //       this.showPrice = false
    //     }
    //     /* 判断该藏品是否已经领取 */
    //     if (res.data.has_received) {
    //     }
    //     /* 判断当前藏品为预约还是可领取 */
    //     let time = res.data.issue_time
    //     this.transferTime(time)
    //   })
    //   .catch((err) => {
    //     console.log(err)
    //   })
    // /* 屏幕高度 */
    // uni.getSystemInfo({
    //   success: (res) => {
    //     this.screenHeight = res.screenHeight * (750 / res.windowWidth) //将px 转换rpx
    //     console.log(this.screenHeight)
    //   },
    // })
    // // 从缓存中读取
    // let that = this
    // uni.getStorage({
    //   key: 'userInfo',
    //   success: (res) => {
    //     console.log(res)
    //     this.uid = res.data.uid
    //     this.token = res.data.token
    //     this.is_auth = res.data.is_auth
    //   },
    // })
  },
  onHide() {
    this.$refs.file.stop()
  },
  onPageScroll(e) {
    this.onTouch(e)
  },
  onShareAppMessage() {
    return {
      title: this.collection_detail.name,
      path: '/pages/index/index',
    }
  },
  onShareTimeline() {
    return {
      title: this.collection_detail.name,
      query: `activity_id=${this.option.activity_id}&collection_id=${this.option.collection_id}`,
      imageUrl: this.canvasImg,
    }
  },
  methods: {
    // 初始化
    async init() {
      this.loads = false

      uni.getSystemInfo({
        success: (system) => {
          this.systemWidth = system.windowWidth / 375
          this.systemHeight = system.windowHeight
        },
      })
      this.userInfo = uni.getStorageSync('userInfo')
      let id = this.option.id
      let activity_id = this.option.activity_id
      let collection_id = this.option.collection_id
      this.activity_id = activity_id
      this.collection_id = collection_id
      /* 获取藏品详情 */
      api
        .getCollectionsDetail({
          /* 新增需传uid */
          activity_id: this.activity_id,
          collection_id: this.collection_id,
          // activity_id: 43,
          // collection_id: 111,
        })
        .then((res) => {
          this.collection_detail = res.data
          console.log('执行', res.data)

          // this.collection_detail.cover_url =
          //   'https://publish.onedaen.com//uploads/material/23-01-04/167281221590236.jpg'

          this.pageColor = res.data.intro_back
          /* 判断当前藏品为预约还是可领取 */
          let time = res.data.issue_time
          const day = new Date()
          const timers = new Date(res.data.issue_time)
          // this.nowTime = this.collection_detail.activity_type == 5

          let follow = res.data.is_follow
          this.transferTime(time, follow)

          if (res.data.price == '0.00') {
            this.showPrice = false
          }
          /* 判断该藏品是否已经领取 */
          if (res.data.is_receive == 1) {
            console.log(123)
            this.collectionStatus = '4'
          }
          if (res.data.is_end == 1) {
            this.collectionStatus = '5'
          }
          if (res.data.inventory == 0) {
            this.soldOut = true
          }
          console.log('init')
          // 获取主文件类型
          this.getFileType()
          // 获取主文件信息
          this.getMainFileInfo()
          // 创建海报

          // this.createdSharePostrs()
          this.loads = true
        })
        .catch((err) => {
          console.log(err)
        })
      uni.stopPullDownRefresh()
      /* 屏幕高度 */
      uni.getSystemInfo({
        success: (res) => {
          this.screenHeight = res.screenHeight * (750 / res.windowWidth) //将px 转换rpx
          console.log(this.screenHeight)
        },
      })
      // 从缓存中读取
      let that = this
      uni.getStorage({
        key: 'userInfo',
        success: (res) => {
          console.log(res)
          this.uid = res.data.uid
          this.token = res.data.token
          this.is_auth = res.data.is_auth
        },
      })
    },
    open() {
      // console.log('open');
      this.stopAnimation = true
      this.previewStyle.transform = `translateY(-15px) rotateY(360deg)`
    },
    /* 下拉刷新 */
    onPullDownRefresh() {
      let _this = this
      setTimeout(() => {
        uni.stopPullDownRefresh()
        this.init()
      }, 500)
    },
    showMask() {
      this.show = true
    },
    close() {
      this.show = false
      this.showShare = false
      this.showCanvas = false
      this.advanceSuccess = false
      this.stopAnimation = false
      // console.log('close');
    },
    PageBack() {
      uni.navigateBack()
    },
    buy() {
      this.$refs.pop2.show()
    },
    getCollectionsDetail() {
      this.loads = false
      /* 获取藏品详情 */
      api
        .getCollectionsDetail({
          /* 新增需传uid */
          // activity_id: this.activity_id,
          activity_id: this.activity_id,
          collection_id: this.collection_id,
        })
        .then((res) => {
          this.collection_detail = res.data
          let time = res.data.issue_time
          let follow = res.data.is_follow
          this.transferTime(time, follow)
          if (res.data.price == '0.00') {
            this.showPrice = false
          }
          /* 判断该藏品是否已经领取 */
          if (res.data.is_receive == 1) {
            this.collectionStatus = '4'
          }
          if (res.data.is_end == 1) {
            this.collectionStatus = '5'
          }
          if (res.data.inventory == 0) {
            this.soldOut = true
          }

          this.loads = true
          // this.createdSharePostrs()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 转换时间戳
    transferTime(time, follow) {
      // const tempTime = new Date(time)
      const tempTime = dayjs(time).valueOf()
      const now = new Date()
      // let date = Date.parse(new Date(time))
      let date = tempTime
      let nowTime = now.getTime()
      // let nowTime = Date.parse(new Date())
      console.log('time', time)
      console.log('date', dayjs(time).valueOf())
      console.log('nowTime', nowTime)
      if (date > nowTime && follow == 1) {
        console.log(111)
        this.collectionStatus = '3'
      } else if (date > nowTime && follow == 0) {
        this.collectionStatus = '2'
      } else if (date < nowTime) {
        this.collectionStatus = '1'
      }
    },
    // 动画
    startAnimation() {},
    transferAnimation() {},
    //关注
    advance() {
      const info = uni.getStorageSync('userInfo')
      if (!info.token) {
        uni.showModal({
          title: '请登录后查看,是否立即登录',
          success: (res) => {
            console.log('res', res)
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/login',
              })
            }
          },
        })
        return
      }
      api
        .advanceCollection({
          activity_id: this.activity_id,
        })
        .then((res) => {
          console.log(res)
          if (res.code == 200) {
            this.stopAnimation = true
            this.advanceSuccess = true
            wxlogin.orderMessage()
            this.getCollectionsDetail()
            this.collectionStatus = '3'
          }
        })
    },
    // 取消关注
    cancelFollow(id) {
      const info = uni.getStorageSync('userInfo')
      if (!info.token) {
        uni.showModal({
          title: '请登录后查看,是否立即登录',
          success: (res) => {
            console.log('res', res)
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/login',
              })
            }
          },
        })
        return
      }
      api
        .cancelFocus({
          follow_id: id,
        })
        .then((res) => {
          console.log(res)
          if (res.code == 200) {
            this.collectionStatus = '2'
            uni.showModal({
              content: res.message,
            })
          }
        })
    },
    // 领取
    get() {
      const info = uni.getStorageSync('userInfo')
      if (!info.token) {
        uni.showModal({
          title: '请登录后查看,是否立即登录',
          success: (res) => {
            console.log('res', res)
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/login',
              })
            }
          },
        })
        return
      }
      /* 使用全局变量 */
      let activity_id = this.activity_id
      let collection_id = this.collection_id
      let activity_appointment = this.activity_appointment
      let uid = this.uid
      let token = this.token
      let show = false
      // 箭头函数显示遮罩
      const showMask = () => {
        this.show = show
      }

      /* 领取藏品 */
      /* 点击领取进入 */

      //判断用户是否登陆
      if (this.token == '') {
        console.log(this.is_auth)
        console.log(111)
        /* 提示用户需要登录操作 */
        uni.showModal({
          title: '提示',
          content: '请先登录再进行操作',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
              uni.navigateTo({
                url: '../login/login',
              })
            } else if (res.cancel) {
            }
          },
        })
      } else if (this.is_auth == 1) {
        /* 提示用户需要实名认证 */
        uni.showModal({
          title: '提示',
          content: '请先进行实名认证再进行操作',
          success: (res) => {
            if (res.confirm) {
              console.log('用户点击确定')
              /* 调起登录 */
              uni.navigateTo({
                url: '../verify/verify',
              })
            } else if (res.cancel) {
            }
          },
        })
      } else {
        this.receiveCollection()
      }
    },
    // 领取藏品
    receiveCollection() {
      try {
        // 请求领取藏品接口
        api
          .receiveCollection({
            activity_id: this.activity_id,
            collection_id: this.collection_id,
          })
          .then((res) => {
            if (res.code == true) {
              this.collectionStatus = '4'
              if (this.collection_detail.inventory == 0) {
                this.soldOut = true
              }
              this.show = true
            } else {
              /* 提示 */
              uni.showModal({
                title: '提示',
                content: res.message,
                success: function (res) {
                  if (res.confirm) {
                  } else if (res.cancel) {
                    console.log('用户点击取消')
                  }
                },
              })
            }
          })
          .catch((res) => {
            console.log(res)
          })
      } catch (error) {
        console.log('error', error)
      }
    },
    // 查看我的藏品
    myCollection() {
      uni.navigateTo({
        url: '../mine/My_collection',
      })
    },
    // 查看我的关注
    myFollow() {
      uni.navigateTo({
        url: '../mine/my_follow/my_follow',
      })
    },
    // 分享
    async share() {
      if (!this.load) {
        await this.createdSharePostrs()
      } else {
        uni.showLoading({
          title: '正在生成海报',
          mask: true,
          icon: 'none',
        })
        const timer = setTimeout(() => {
          if (this.load) {
            uni.showShareImageMenu({
              path: this.canvasImg,
              complete: (res) => {
                uni.hideLoading()
                clearTimeout(timer)
              },
            })
            // uni.canvasToTempFilePath({
            //   // 这里修改保存的图片格式
            //   fileType: 'jpg',
            //   canvasId: 'share',
            //   quality: 1,
            //   success: (res) => {
            //     // 保存带哦本地
            //     uni.showShareImageMenu({
            //       path: this.canvasImg,
            //     })
            //   },
            //   complete: (res) => {
            //     uni.hideLoading()
            //     clearInterval(timer)
            //   },
            // })
          }
        }, 500)
      }
    },
    // 分享海报
    sharePosters(type) {
      console.log('执行')
      uni.canvasToTempFilePath({
        // 这里修改保存的图片格式
        fileType: 'jpg',
        canvasId: 'share',
        quality: 1,
        success: (res) => {
          // 保存带哦本地
          uni.showShareImageMenu({
            path: res.tempFilePath,
          })
        },
      })
    },
    //保存至相册imgUrl
    clickSaveImg() {
      var _this = this
      wx.canvasToTempFilePath({
        //将canvas生成图片
        canvasId: 'share',
        x: 0,
        y: 0,
        width: 335,
        height: 472,
        success: function (res) {
          _this._data.imgUrl = res.tempFilePath
          wx.saveImageoPhotosAlbum({
            //保存图片到相册
            filePath: res.tempFilePath, //生成图片临时路径
            success: function () {
              wx.showToast({
                title: '图片已保存至相册！',
                duration: 2000,
              })
            },
          })
        },
        fail: (error) => {
          wx.showToast({
            title: '保存图片失败',
            duration: 2000,
          })
          if (
            error.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' ||
            error.errMsg === 'saveImageToPhotosAlbum:fail auth deny' ||
            error.errMsg === 'saveImageToPhotosAlbum:fail authorize no response'
          ) {
            // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
            wx.showModal({
              title: '提示',
              content: '需要您授权保存相册',
              showCancel: false,
              success: (modalSuccess) => {
                wx.openSetting({
                  success(settingdata) {
                    console.log('settingdata', settingdata)
                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                      wx.showModal({
                        title: '提示',
                        content: '获取权限成功',
                        showCancel: false,
                      })
                    } else {
                      wx.showModal({
                        title: '提示',
                        content: '获取权限失败，将无法保存到相册哦~',
                        showCancel: false,
                      })
                    }
                  },
                })
              },
            })
          }
        },
      })
    },
    shareFriend() {
      wx.canvasToTempFilePath({
        //将canvas生成图片
        canvasId: 'myCanvas',
        x: 0,
        y: 0,
        width: 370,
        height: 472,
        success: function (res) {
          let urls = res.tempFilePath //图片临时路径
          wx.showShareImageMenu({
            //分享给朋友
            path: urls,
            success: (res) => {
              console.log('分享成功：', res)
            },
            fail: (err) => {
              console.log('分享失败：', err)
              wx.showToast({
                title: '分享失败',
                duration: 2000,
              })
            },
          })
        },
      })
    },
    // 长按保存海报
    saveSharePic() {
      uni.showModal({
        title: '提示',
        content: '确定要保存分享海报吗？',
        success: function (res) {
          if (res.confirm) {
            // canvas生成图片
            uni.canvasToTempFilePath({
              // 这里修改保存的图片格式
              fileType: 'jpg',
              canvasId: 'share',
              quality: 1,
              success: function (res) {
                // 保存带哦本地
                uni.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success: function () {
                    uni.showToast({
                      title: '保存海报成功',
                      icon: 'none',
                      duration: 3000,
                    })
                  },
                  fail: function () {
                    uni.showToast({
                      title: '保存海报失败',
                      icon: 'none',
                      duration: 3000,
                    })
                  },
                })
              },
            })
          }
        },
      })
    },
    // canvas 文字换行
    getTextInfo(canvas, str, size, width) {
      const getRpx = new Promise((resolve, reject) => {
        uni.getSystemInfo({
          success: (system) => {
            resolve(system.windowWidth / 375)
          },
        })
      })
      return getRpx.then((rpx) => {
        // 画布总宽度 rpx单位
        const canvasWidth = width * rpx
        // 字体大小 rpx单位
        let fontSize = parseInt(size * rpx)
        const tempArr = []
        for (let i = 0; i < str.length; i++) {
          const font = str.slice(i, i + 1)
          tempArr.push(font)
        }
        let rowFontNum = 0
        tempArr.reduce((now, next, index) => {
          const fontWidth = canvas.measureText(next).width * rpx
          now = now + fontWidth
          rowFontNum = canvasWidth > now ? index + 1 : rowFontNum
          return now
        }, 0)

        // 每行所需字数 = 画布总宽度 / 单个字体大小
        // let rowFontNum = Math.floor(canvasWidth / fontSize)

        // 字符串总长度
        let strLength = str.length
        // 所需行数 = 字符总长度 / 每行所需字数
        let rows = Math.ceil(strLength / rowFontNum)
        // 行高

        return {
          canvasWidth,
          fontSize,
          rowFontNum,
          strLength,
          rows,
        }
      })
    },
    // 生成分享海波啊
    async createdSharePostrs() {
      if (this.launch) return
      uni.showLoading({
        title: '正在生成海报',
        mask: true,
        icon: 'none',
      })
      this.launch = true
      const day = new Date()
      const time = new Date(this.collection_detail.issue_time)
      const rpx = parseFloat(this.systemWidth.toFixed(2))
      const context = uni.createCanvasContext('share', this)
      context.setTextAlign('center')
      // 背景色
      context.rect(0 * rpx, 50 * 0, 650 * rpx, 1100 * rpx)
      context.setFillStyle('#fff')
      context.fill()
      // 藏品名称
      context.setTextAlign('left')
      const name = await this.getTextInfo(
        context,
        this.collection_detail.name,
        18,
        160,
      )
      context.setFontSize(name.fontSize)
      context.setFillStyle('#000')
      // context.fillText(this.collection_detail.name, 22.5 * rpx, 360 * rpx)
      for (let i = 0; i <= name.rows; i++) {
        context.fillText(
          this.collection_detail.name.slice(
            name.rowFontNum * (i - 1),
            name.rowFontNum * i,
          ),
          22.5 * rpx,
          (335 + i * 23) * rpx,
        )
      }
      let lineHeight =
        name.rows - 1 >= 2 ? (name.rows - 1) * 21 : (name.rows - 1) * 20
      this.deviation = lineHeight * 2
      lineHeight = name.rows - 1 == 3 ? 67 : lineHeight
      // 小程序码
      const code = new Promise((resolve, reject) => {
        uni.downloadFile({
          url: 'https://publish.onedaen.com/uploads/material/picture/code.jpg',
          success: (res) => {
            context.drawImage(
              res.tempFilePath,
              230 * rpx,
              (425 + lineHeight) * rpx,
              64 * rpx,
              64 * rpx,
            )
            // 长按识别
            context.setTextAlign('left')
            context.setFontSize(10 * rpx)
            context.setFillStyle('#999')
            context.fillText(
              '长按识别，期待与您',
              218 * rpx,
              (505 + lineHeight) * rpx,
            )
            context.fillText(
              '一起见证本次活动!',
              220 * rpx,
              (520 + lineHeight) * rpx,
            )
            context.draw(true)
            resolve()
          },
        })
      })
      // 预览图
      const preview = new Promise((resolve, reject) => {
        uni.downloadFile({
          url: this.collection_detail.cover_url,
          // 发行时间背景
          success: (res) => {
            // const day = new Date()

            context.drawImage(
              res.tempFilePath,
              0 * rpx,
              0 * rpx,
              325 * rpx,
              325 * rpx,
            )

            context.beginPath()
            context.moveTo(3 * rpx, 300 * rpx)
            context.arcTo(193 * rpx, 300 * rpx, 193 * rpx, 325 * rpx, 3 * rpx)
            context.lineTo(193 * rpx, 325 * rpx)
            context.lineTo(0 * rpx, 325 * rpx)
            context.arcTo(0 * rpx, 300 * rpx, 193 * rpx, 300 * rpx, 3 * rpx)
            context.setStrokeStyle('rgba(0, 0, 0, 0.8)')
            context.fillStyle = 'rgba(0, 0, 0, 0.8)'
            context.fill()
            context.stroke()
            context.setFontSize(12 * rpx)
            context.setFillStyle('#fff')
            context.setTextAlign('center')
            const timeName = this.activityList[
              this.collection_detail.activity_type
            ].info
            context.fillText(
              `${
                this.activityList[this.collection_detail.activity_type].start
              } | ${this.collection_detail.activity_info[timeName]} ${
                this.activityList[this.collection_detail.activity_type].end
              }`,
              95 * rpx,
              317 * rpx,
            )
            context.draw(true)
            resolve()
          },
        })
      })
      // 智信链logo
      const logo = new Promise((resolve, reject) => {
        // https://publish.onedaen.com/uploads/material/picture/zxl_yde.png
        uni.downloadFile({
          url:
            'https://publish.onedaen.com/uploads/material/picture/zxl_yde.png',
          success: (res) => {
            context.drawImage(
              res.tempFilePath,
              20 * rpx,
              (495 + lineHeight) * rpx,
              130 * rpx,
              25 * rpx,
            )
            context.draw(true)
            resolve()
          },
        })
      })
      // 发行商头像
      const avatar = new Promise((resolve, reject) => {
        uni.downloadFile({
          url: this.collection_detail.brand_info.icon_image,
          success: (res) => {
            context.beginPath()
            context.arc(
              32.5 * rpx,
              (422.5 + lineHeight) * rpx,
              12.5 * rpx,
              0,
              2 * Math.PI,
            )
            context.setStrokeStyle('rgba(0,0,0,1)')
            // context.setLineWidth(10)

            // context.setShadow(0, 0, 1, '#fff')
            context.save()
            context.clip()
            context.stroke()
            context.drawImage(
              res.tempFilePath,
              20 * rpx,
              (410 + lineHeight) * rpx,
              25 * rpx,
              25 * rpx,
            )

            context.draw(true)
            context.restore()
            resolve()
          },
        })
      })

      // 限量
      context.beginPath()
      context.moveTo(22 * rpx, (380 + lineHeight) * rpx)
      context.lineTo(60 * rpx, (380 + lineHeight) * rpx)
      context.lineTo(60 * rpx, (400 + lineHeight) * rpx)
      context.arcTo(
        20 * rpx,
        (400 + lineHeight) * rpx,
        20 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        20 * rpx,
        (380 + lineHeight) * rpx,
        22 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.setStrokeStyle('#53A8E8')
      context.fillStyle = '#53A8E8'
      context.fill()
      context.stroke()
      context.setFontSize(12 * rpx)
      context.setFillStyle('#fff')
      context.setTextAlign('center')
      context.fillText('限量', 40 * rpx, (394 + lineHeight) * rpx)
      this.collection_detail.show_number =
        this.collection_detail.show_number + ''
      const countLength = this.collection_detail.show_number.length - 1 + ''
      const countWidth = parseInt((100 + countLength * 7) * rpx)

      // 发行数量
      context.beginPath()
      context.moveTo(60 * rpx, (380 + lineHeight) * rpx)
      context.arcTo(
        countWidth,
        (380 + lineHeight) * rpx,
        countWidth,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        countWidth,
        (400 + lineHeight) * rpx,
        60 * rpx,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.lineTo(60 * rpx, (400 + lineHeight) * rpx)
      context.setStrokeStyle('#53A8E8')
      context.stroke()
      context.setFontSize(12 * rpx)
      context.setFillStyle('#53A8E8')
      context.fillText(
        `${this.collection_detail.show_number}份`,
        60 * rpx + (countWidth - 60 * rpx) / 2,
        (394 + lineHeight) * rpx,
      )

      this.collection_detail.collect_type_count =
        this.collection_detail.collect_type_count + ''
      const collectionLength =
        this.collection_detail.collect_type_count.length - 1
      const collectionWidth = parseInt(
        countWidth + (50 + collectionLength * 6 * rpx),
      ) // 150

      // 藏品款数
      context.beginPath()
      context.moveTo(countWidth + 12 * rpx, (380 + lineHeight) * rpx)
      context.arcTo(
        collectionWidth,
        (380 + lineHeight) * rpx,
        collectionWidth,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        collectionWidth,
        (400 + lineHeight) * rpx,
        countWidth + 10 * rpx,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        countWidth + 10 * rpx,
        (400 + lineHeight) * rpx,
        countWidth + 10 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        countWidth + 10 * rpx,
        (380 + lineHeight) * rpx,
        countWidth + 12 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.setStrokeStyle('#000')
      context.fillStyle = '#000'
      context.fill()
      context.stroke()
      context.setFontSize(12 * rpx)
      context.setFillStyle('#fff')
      context.fillText(
        `共${this.collection_detail.collect_type_count}款`,
        countWidth + 10 * rpx + (collectionWidth - (countWidth + 10 * rpx)) / 2,
        (394 + lineHeight) * rpx,
      )

      // 标签

      const flagLength = this.collection_detail.flag.length - 1
      const flagWidth = parseInt(collectionWidth + (40 + flagLength * 10 * rpx)) // 200
      context.beginPath()
      context.moveTo(collectionWidth + 12 * rpx, (380 + lineHeight) * rpx)
      context.arcTo(
        flagWidth,
        (380 + lineHeight) * rpx,
        flagWidth,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        flagWidth,
        (400 + lineHeight) * rpx,
        collectionWidth + 10 * rpx,
        (400 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        collectionWidth + 10 * rpx,
        (400 + lineHeight) * rpx,
        collectionWidth + 10 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.arcTo(
        collectionWidth + 10 * rpx,
        (380 + lineHeight) * rpx,
        collectionWidth + 12 * rpx,
        (380 + lineHeight) * rpx,
        4 * rpx,
      )
      context.setStrokeStyle('rgba(0,0,0,0)')

      const color = context.createLinearGradient(
        collectionWidth + 10 * rpx,
        (400 + lineHeight) * rpx,
        flagWidth,
        (400 + lineHeight) * rpx,
      ) //(起始点坐标x,起始点坐标y，结束点坐标x,结束点坐标y)
      color.addColorStop(0, '#d8a0d8') //起点位置的颜色
      color.addColorStop(0.41, '#a4bbe5') //中间点位置的颜色
      color.addColorStop(1, '#cdffd7') //终点位置的颜色
      context.fillStyle = color
      context.fill()
      context.stroke()
      context.setFontSize(12 * rpx)
      context.setFillStyle('#000')
      // context.fillText(
      //   this.collection_detail.flag,
      //   collectionWidth + 18 * rpx,
      //   (394 + lineHeight) * rpx,
      // )
      const startFlag = collectionWidth + 10 * rpx
      context.fillText(
        this.collection_detail.flag,
        startFlag + (flagWidth - startFlag) / 2,
        (394.5 + lineHeight) * rpx,
      )

      // 发行商名称
      context.setTextAlign('left')
      context.setFontSize(15 * rpx)
      context.setFillStyle('#666666')
      context.fillText(
        this.collection_detail.brand_info.brand_name,
        60 * rpx,
        (428 + lineHeight) * rpx,
      )
      context.save()
      context.draw(true)
      Promise.all([code, preview, logo, avatar]).then(() => {
        uni.canvasToTempFilePath({
          // 这里修改保存的图片格式
          fileType: 'jpg',
          canvasId: 'share',
          quality: 1,
          success: (res) => {
            this.canvasImg = res.tempFilePath
            this.load = true
            uni.hideLoading()
            this.share()
          },
        })
      })
    },
    // 打开藏品主文件
    openFile() {
      const idx = this.collection_detail.medium_url.lastIndexOf('.') + 1
      const type = this.collection_detail.medium_url.substr(idx).toLowerCase()

      this.fileInfo = {
        url: this.collection_detail.medium_url,

        type,
        icon: this.collection_detail.cover_url,
      }

      this.$nextTick(() => {
        this.stopAnimation = true
        this.previewStyle.transform = `translateY(-15px) rotateY(360deg)`
        this.animationData = `translateY(-15px) rotateY(360deg)`
        this.$refs.file.open()
      })
    },
    // 获取主文件信息
    getMainFileInfo() {
      uni.getImageInfo({
        src: this.collection_detail.cover_url,
        success: (image) => {
          const proportion = image.width / image.height // 图片比例
          const scale = image.width / 400
          this.imgHeight = image.height / scale
          this.imgWidth = image.width
          this.proportion = proportion
          console.log('image', image, proportion)
          // this.previewStyle.border =
          //   (proportion >= 0.9 && proportion <= 1.1) || !proportion
          //     ? '4px solid rgba(255, 255, 255, 0.5'
          //     : ''
          this.previewStyle.border = ''
          this.imgStyle.border =
            (proportion >= 0.9 && proportion <= 1.1) || !proportion
              ? '12rpx solid rgba(255, 255, 255, 0.5)'
              : ''
          this.imgStyle.width =
            (proportion >= 0.9 && proportion <= 1.1) || !proportion
              ? `${proportion * 400}rpx`
              : `${proportion * 400}rpx`
          this.imgStyle.height =
            (proportion >= 0.9 && proportion <= 1.1) || !proportion
              ? `${this.imgHeight}rpx`
              : `${this.imgHeight}rpx`
          this.previewStyle.width = `${proportion * 400}rpx`
          this.previewStyle.height = `${this.imgHeight}rpx`
          clearInterval(this.timers)
          this.move()
        },
      })
    },
    // 旋转动画
    move() {
      // if (this.timers) return
      this.timers = setInterval(() => {
        // return
        if (this.scrollTop > 300) return
        if (this.touchState) return
        if (this.stopAnimation) return
        if (this.advanceSuccess || this.show) {
          this.previewStyle.transform = `translateY(-15px) rotateY(${this.imgDegs}deg)`
          return
        }

        if (this.direction == 'left') {
          this.imgDegs = this.imgDegs + 1
          this.direction = this.imgDegs == 390 ? 'right' : 'left'
        } else if (this.direction == 'right') {
          this.imgDegs = this.imgDegs - 1
          this.direction = this.imgDegs == 330 ? 'left' : 'right'
        }

        this.previewStyle.transform = `translateY(-15px) rotateY(${this.imgDegs}deg)`
      }, 100)
    },
    // 判断文件类型
    getFileType() {
      const idx = this.collection_detail.medium_url.lastIndexOf('.')
      const type = this.collection_detail.medium_url
        .substr(idx + 1)
        .toLowerCase()
      console.log('type', type)
      const video =
        'mpeg,avi,navi,asf、mov、3gp、wmv、divx、xvid、rm、rmvb、flv,f4v,mp4,m4v,mkv'
      const audio =
        'mp3,mpeg,wave,cd,wav,mpeg-4,aiff,wma,midi,amr,flag,ape,oggvorbis,realaudio,vqf,aac'
      // 音视频类型
      if (video.indexOf(type) != -1 || audio.indexOf(type) != -1) {
        this.showPlay = true
      } else {
        this.showPlay = false
      }
    },
    jumps() {
      uni.navigateTo({
        url: '/pages/verify/verify',
      })
    },
    // 滚动事件
    onTouch(e) {
      this.scrollTop = e.scrollTop
      console.log('开始', e)
      clearTimeout(this.scrTimer)
      this.touchState = true
      this.scrTimer = setTimeout(() => {
        this.onTimerLoad = false
        this.touchState = false
        clearTimeout(this.scrTimer)
      }, 200)
      // if (this.touchState) return
    },
    // 结束滑动
    onTouchEnd() {},
  },
  // watch: {

  // },
}
</script>

<style lang="scss">
page {
  background-color: #181816;
}

.preview-box {
  // @include center;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-15px) rotateY(300deg);
  width: 400rpx;
  height: 400rpx;
  // box-sizing: border-box;
  color: #fff;
  border-radius: 10rpx;
  transition: 0.1s;
  position: relative;

  .con1 {
    background-color: rgba(0, 0, 0, 1);
    border-radius: 20rpx;
  }

  .con2 {
    background-color: rgba(0, 0, 0, 1);
    transform: translateZ(-40rpx);
    border-radius: 20rpx;
  }

  .con3 {
    width: 38rpx;
    height: 192rpx;
    // top: 4px;
    background-color: rgba(0, 0, 0, 1);
    transform: rotateY(90deg) translateX(22rpx);
  }

  .con4 {
    width: 38rpx;
    background-color: rgba(0, 0, 0, 1);
    transform: rotateY(-90deg) translateX(-20rpx) translateZ(20rpx);
    left: 95%;
  }

  .con5 {
    height: 20rpx;
    width: 200rpx;
    background-color: rgba(0, 0, 0, 1);
    transform: rotateX(90deg) translateY(-20rpx);
    left: 5%;
  }

  .con6 {
    height: 20px;
    width: 200px;
    background-color: rgba(0, 0, 0, 1);
    transform: rotateX(90deg) translateY(-20rpx);
    top: 100%;
  }

  .rectangle {
    max-height: 400rpx;
    max-width: 400rpx;
  }

  .preview-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
  }
  .preview-null {
    height: 400rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  view {
    width: 400rpx;
    height: 400rpx;
    text-align: center;
    box-sizing: border-box;
    font-size: 50rpx;
    font-weight: bolder;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    /* 设置透明度 */
    opacity: 0.7;
    box-shadow: 0 0 10rpx rgb(100, 99, 99);
  }

  // transform: translateY(-15px) rotateY(360deg);
  // transform-style: preserve-3d;
  image {
    border-radius: 20rpx;
    // max-width: 100%;
    // max-height: 100%;
    // border: 4px solid rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
  }
}

/* show_image */
/* this_detail */

.big_img {
  width: 750rpx;
  height: calc(1865rpx / 2);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  .big-bg {
    position: absolute;
    left: 0;
    top: 0;
  }

  .sale_time {
    position: absolute;
    bottom: -5rpx;
    left: 30rpx;
    width: 330rpx;
    height: 60rpx;
    line-height: 50rpx;
    text-align: center;
    border-radius: 10rpx;
    font-size: 24rpx;
    color: #ffffff;
  }

  .back_btn {
    position: fixed;
    top: 50rpx;
    left: 30rpx;
    width: 56rpx;
    height: 56rpx;
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .share_btn {
    position: absolute;
    top: 150rpx;
    right: 30rpx;
    width: 56rpx;
    height: 56rpx;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 100%;
    z-index: 1;

    image {
      width: 100%;
      height: 100%;
    }
  }

  image {
    width: 100%;
    height: 100%;
  }

  // 藏品图
  .collectionImg_box {
    position: absolute;
    top: 250rpx;
    // left: 195rpx;
    width: 365rpx;
    height: 365rpx;
    border: 1px solid #fff;
    border-radius: 20rpx;
    // transition: 0.1s;
    // transform-style: preserve-3d;
    transform: translateY(-15px) rotateY(360deg);

    .collectionImg {
      width: 350rpx;
      height: 350rpx;
      margin: 5rpx auto;
      background-color: rgba(229, 230, 231, 0.5);
      border-radius: 20rpx;

      image {
        width: 335rpx;
        height: 335rpx;
        border-radius: 20rpx;
        margin: 8rpx;
      }
    }
  }
}

.detail_content {
  width: 685rpx;
  left: 5%;
  padding-top: 40rpx;
  padding-bottom: 200rpx;
  position: relative;

  .goods_detail {
    min-height: 250rpx;
    width: 100%;
    padding: 28rpx 24rpx 22rpx;
    margin-top: -120rpx;
    background-color: #242424;
    border-radius: 20rpx;
    box-sizing: border-box;

    .goods_title {
      word-break: break-all;
      font-family: PingFang-SC-Medium;
      font-size: 36rpx;
      color: #ffffff;
    }

    /* 发行数量 */
    .content_countBox {
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      margin-top: 30rpx;
      height: 40rpx;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #4d4d4d;

      .two_box {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        height: 42rpx;

        .count {
          display: flex;
          align-items: center;
          letter-spacing: 1rpx;
          background-color: #53a8e8;
          border: 2rpx solid #53a8e8;

          height: 40rpx;
          line-height: 40rpx;
          color: #fff;
          border-radius: 5rpx;
          overflow: hidden;

          .total {
            padding: 0 10rpx;
            text-align: center;
            line-height: 40rpx;
            height: 40rpx;
            font-weight: bold;
          }

          .models {
            text-align: center;
            height: 40rpx;
            padding: 0 15rpx;

            // border-radius: 5rpx;
            // margin-left: 22rpx;
            background-color: #242424;
            color: #53a8e8;
          }
        }

        .types {
          margin-left: 20rpx;
          padding: 0 11rpx;
          height: 40rpx;
          text-align: center;
          background-image: linear-gradient(
              102deg,
              #d8a0d8 0%,
              #a4bbe5 41%,
              #cdffd7 100%
            ),
            linear-gradient(#181816, #181816);
          background-blend-mode: normal, normal;
          line-height: 40rpx;
          border-radius: 5rpx;
        }
      }

      /* 价格 */
      .price {
        color: #4efffe;
        font-size: 26rpx;
        font-style: italic;
        font-weight: bold;
      }
    }
  }

  .goods_host {
    display: flex;
    justify-content: space-between;
    margin-top: 25rpx;

    .host {
      display: flex;

      .host_logo {
        width: 60rpx;
        height: 60rpx;
        border-radius: 30rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
      }
    }

    text {
      font-family: PingFang-SC-Medium;
      font-size: 30rpx;
      line-height: 60rpx;
      margin-left: 20rpx;
      color: #cccccc;
      vertical-align: middle;
    }
  }

  .nft_notice {
    width: 100%;
    box-sizing: border-box;
    background-color: #242424;
    border-radius: 20rpx;
    margin-top: 30rpx;
    padding: 38.5rpx 24rpx;

    .title {
      font-size: 30rpx;
      color: #babcbb;
      line-height: 100%;
      margin-bottom: 35rpx;
    }

    .notice_img {
      height: 100rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .collection_describe {
    width: 100%;
    height: fit-content;
    background-color: #242424;
    border-radius: 20rpx;
    margin-top: 30rpx;
    box-sizing: border-box;
    padding: 35rpx 24rpx;
  }

  .special_notice {
    width: 100%;
    box-sizing: border-box;

    height: fit-content;
    background-color: #242424;
    border-radius: 20rpx;
    margin-top: 30rpx;

    padding: 0 24rpx 20rpx;
  }

  .equity_describe {
    width: 100%;
    box-sizing: border-box;
    background-color: #242424;
    border-radius: 20rpx;
    margin-top: 30rpx;
    padding: 0 24rpx 20rpx;
  }
}

/* 底部按钮 */
.footer_btn {
  width: 100%;
  padding-top: 20rpx;
  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  position: fixed;
  background-color: #242424;
  bottom: calc(var(--window-bottom));
  .footer-tip {
    padding: 0 33rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    padding-bottom: 22rpx;
    border-bottom: 2rpx solid #4d4d4d;

    .tip {
      color: #fff;
      font-size: 22rpx;
    }
    .btn {
      background-color: #4ffffe;
      font-size: 22rpx;
      border-radius: 22rpx;
      height: 43rpx;
      padding: 0 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .To_buy {
    width: 90%;
    margin: auto;
    position: relative;
    z-index: 100;
    .exhausted {
      background-color: #232428;
      background-image: none;
      border: 1px solid #909090;
      color: #fff;
    }

    button {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
        linear-gradient(#dcb71a, #dcb71a);
      background-blend-mode: normal, normal;
      color: #000;
      font-family: PingFang-SC-Medium;
      font-size: 26rpx;
      border-radius: 40rpx;
    }
  }
}

/* 购买弹窗*/
.buy_content {
  width: 90%;
  margin: auto;

  .buy_header {
    display: flex;
    padding-bottom: 20rpx;
    border-bottom: 4rpx solid #f2f2f2;

    .things_img {
      width: 180rpx;
      height: 180rpx;
      background-color: #4e4e4e;
      border-radius: 20rpx;
      margin: 20rpx 0;

      image {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
      }
    }

    .header_text {
      margin-left: 30rpx;

      .price {
        padding: 25rpx 0;

        text {
          font-family: PingFang-SC-Medium;
          font-size: 24rpx;
          line-height: 24rpx;
        }

        font-family: PingFang-SC-Medium;
        font-size: 40rpx;
        font-weight: bold;
        line-height: 24rpx;
      }

      .stock {
        font-family: PingFang-SC-Regular;
        font-size: 26rpx;
        line-height: 24rpx;
        color: #808080;
        padding: 20rpx 0;
      }

      .limit {
        font-family: PingFang-SC-Regular;
        font-size: 26rpx;
        line-height: 24rpx;
        color: #808080;
        padding: 20rpx 0;
      }
    }
  }

  .type {
    padding: 30rpx 0;
    border-bottom: 4rpx solid #f2f2f2;

    .type_title {
      font-family: PingFang-SC-Medium;
      font-size: 30rpx;
    }

    .type_select {
      display: flex;
      margin-top: 20rpx;

      .select_box {
        width: 180rpx;
        height: 65rpx;
        background-color: #f8f8f8;
        border-radius: 10rpx;
        border: solid 1rpx #b2b2b2;
        text-align: center;
        line-height: 65rpx;
        font-size: 30rpx;
      }

      .selected {
        background-color: #fdfff6 !important;
        border: solid 1rpx #eac303 !important;
        font-family: PingFang-SC-Medium;
        color: #eac303;
      }
    }
  }

  .count {
    display: flex;
    justify-content: space-between;
    height: 125rpx;
    border-bottom: 4rpx solid #f2f2f2;

    .count_title {
      display: flex;
      line-height: 125rpx;

      text {
        font-family: PingFang-SC-Medium;
        font-size: 30rpx;
      }

      .limit_box {
        font-family: PingFang-SC-Medium;
        font-size: 18rpx;
        color: #ffffff;
        text-align: center;
        line-height: 35rpx;
        margin: 45rpx 10rpx;
        width: 105rpx;
        height: 35rpx;
        background-color: #ffb311;
        border-radius: 17rpx;
      }
    }

    .change_count {
      display: flex;
      line-height: 125rpx;
      margin: 33rpx 0;
      text-align: center;

      button {
        height: 60rpx;
        line-height: 60rpx;
        font-size: 30rpx;
        vertical-align: middle;
        background-color: #ededed;
        border-radius: 10rpx;
        border: 0;
      }

      input {
        width: 70rpx;
        height: 60rpx;
        background-color: #ededed;
        border-radius: 10rpx;
        line-height: 60rpx;
      }
    }
  }

  .buy_now {
    width: 100%;
    height: 80rpx;
    margin-top: 70rpx;

    button {
      line-height: 80rpx;
      font-size: 26rpx;
      color: #ffffff;
      height: 81rpx;
      background-color: #eac303;
      border-radius: 6rpx;
      border: 0;
    }
  }
}

/* 购买成功 */
.buy_success {
  width: 600rpx;
  display: flex;
  flex-direction: column;
  padding: 40rpx 20rpx;

  .content {
    text-align: center;

    .content_text {
      font-size: 30rpx;
      font-weight: bold;
      margin: 30rpx 0;
    }

    .content_text2 {
      font-size: 26rpx;
      color: #4d4d4d;
    }

    .close_btn {
      min-width: 150rpx;
      max-width: 180rpx;
      margin: auto;
      height: 60rpx;

      line-height: 60rpx;
      background-image: linear-gradient(270deg, #f0c611 0%, #4effff 100%),
        linear-gradient(#dcb71a, #dcb71a);
      background-blend-mode: normal, normal;
      border-radius: 32rpx;

      button {
        min-width: 150rpx;
        max-width: 180rpx;
        margin: auto;
        font-size: 26rpx;
        height: 60rpx;
        line-height: 60rpx;
        background-image: linear-gradient(270deg, #f0c611 0%, #4effff 100%),
          linear-gradient(#dcb71a, #dcb71a);
        background-blend-mode: normal, normal;
        border-radius: 32rpx;
      }
    }
  }
}

/* 领取遮罩 */

.get_success {
  position: relative;
  width: 623rpx;
  height: 310rpx;
  justify-content: center;
  align-items: center;
  z-index: 999;

  .content {
    position: absolute;
    background-color: #fff;
    width: 100%;
    border-radius: 20rpx;
    top: -200rpx;
    justify-content: center;
    align-items: center;

    .success_img {
      width: 360rpx;
      height: 290rpx;
      margin-left: 19%;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .success_text {
      margin-top: 70rpx;
      font-family: PingFang-SC-Medium;
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
    }

    .get_btn {
      width: 50%;
      height: 80rpx;
      margin: 60rpx auto;
      text-align: center;
      align-items: center;
      vertical-align: middle;
      line-height: 80rpx;
      background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
        linear-gradient(#dcb71a, #dcb71a);
      background-blend-mode: normal, normal;
      border-radius: 40rpx;
      border: 0;
    }
    .box-close {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -120rpx;
      opacity: 0.5;
      image {
        width: 80rpx;
        height: 80rpx;
      }
    }
  }
}

/* 分享保存图片 */
.share_content {
  width: 650rpx;
  margin: auto;

  .share_img {
    width: 100%;
    height: 600rpx;
    border-radius: 20rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .share_detail {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 95%;
    margin: auto;

    .share_text {
      display: flex;
      flex-direction: column;
      width: 100%;

      .name {
        font-size: 36rpx;
        font-weight: bold;
        margin-top: 30rpx;
      }

      .host {
        display: flex;
        margin-top: 40rpx;

        .host_logo {
          width: 60rpx;
          height: 60rpx;
          border-radius: 30rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
        }
      }

      .two_box {
        display: flex;
        justify-content: space-between;
        height: 40rpx;
        font-size: 24rpx;
        margin-top: 30rpx;
        width: 50%;

        .count {
          display: flex;
          min-width: 120rpx;
          max-width: 250rpx;
          letter-spacing: 1rpx;
          background-color: #53a8e8;
          border: #53a8e8;
          padding: 0 10rpx;
          height: 40rpx;
          line-height: 40rpx;
          color: #fff;
          border-radius: 5rpx;

          .total {
            text-align: center;
            line-height: 40rpx;
            height: 40rpx;
            font-weight: bold;
          }
        }

        .models {
          min-width: 80rpx;
          max-width: 150rpx;
          text-align: center;
          height: 36rpx;
          line-height: 36rpx;
          color: #fff;
          border-radius: 5rpx;
          margin-left: 10rpx;
          background-color: #091227;
          color: #fff;
        }

        .types {
          margin-left: 20rpx;
          min-width: 60rpx;
          max-width: 100rpx;
          height: 38rpx;
          text-align: center;
          background-image: linear-gradient(
              102deg,
              #d8a0d8 0%,
              #a4bbe5 41%,
              #cdffd7 100%
            ),
            linear-gradient(#181816, #181816);
          background-blend-mode: normal, normal;
          line-height: 38rpx;
          border-radius: 5rpx;
        }
      }

      .name {
        color: #000;
      }
    }

    .share_logo {
      display: flex;
      justify-content: space-between;

      .share_qrcode {
        display: flex;
        flex-direction: column;
        margin-top: 20rpx;

        image {
          width: 120rpx;
          height: 120rpx;
          margin-top: 10rpx;
          margin-left: 20rpx;
        }

        text {
          margin: 20rpx 0;
          font-size: 24rpx;
        }
      }
    }
  }
}

.save_btn {
  width: 90%;
  margin: 40rpx auto;

  button {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
      linear-gradient(#dcb71a, #dcb71a);
    background-blend-mode: normal, normal;
    color: #000;
    font-family: PingFang-SC-Medium;
    font-size: 26rpx;
    border-radius: 6rpx;
  }
}

.end_btn {
  width: 90%;
  height: 80rpx;
  line-height: 80rpx;
  margin: 30rpx auto;
  border-radius: 40rpx;

  button {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    margin: auto;
    background-color: rgba(58, 58, 58, 0.7);
    color: #f7f7f7;
    font-family: PingFang-SC-Medium;
    font-size: 26rpx;
    font-weight: bold;
    border-radius: 40rpx;
  }
}

.test {
  width: 750rpx;

  .canvas {
    width: 650rpx;
    height: 1500rpx;
    background-color: #000;
    margin: 0 auto;
  }
}

.share-box {
  left: -100%;
  top: -100%;
  position: fixed;
  height: 100vh;
  width: 100vw;

  .share-icon {
    font-size: 30rpx;
    position: absolute;
    bottom: 100rpx;
    left: 355rpx;
    background-color: #1a1a1a;
    color: #999;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    padding: 10rpx;
  }

  .share-list {
    position: absolute;
    width: 650rpx;
    left: 50rpx;
    top: 1100rpx;
    display: flex;
    justify-content: space-between;
    z-index: 1;

    .share-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #fff;
      font-size: 13rpx;

      .share-menu {
        width: 85rpx;
        height: 85rpx;
        border-radius: 20rpx;
        background-color: #fff;
      }

      ::v-deep button {
        font-size: 13rpx !important;
        background-color: transparent;
        padding: 0;
        color: #fff;
      }

      &:first-child {
        justify-content: center;
        font-size: 30rpx;
      }
    }
  }

  // 分享海报
  .posters {
    width: 650rpx;
    height: 1100rpx;
    border-radius: 20rpx;
    // overflow: hidden;
    margin: 0 50rpx;
    position: relative;
    z-index: 1;

    .posters-canvas {
      width: 650rpx;
      height: 1100rpx;
      margin: 0 auto;
      // background-color: fff;
    }
  }
}

.share-mask {
  background-color: #000;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  // transform-style: preserve-3d;
  // transform: translateY(-200px);
}

.files {
  ::v-deep .u-popup__content {
    background-color: transparent !important;
  }
}
</style>
